<script lang="ts" setup>
import {Back,CircleCloseFilled} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {ButtonColor} from "@/utils/buttonsColor";
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import {delSendRecord, sendRecordListByMeterId} from "@/api/demoApi";
import {useRoute, useRouter} from "vue-router";
import {message} from "@/utils/message";
import { ElMessageBox } from 'element-plus'

defineOptions({
  name: "sendRecord"
});

/**-------------------路由参数-------------------**/
const route = useRoute()
const router = useRouter()
const meterInfo = {...route.query}


/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'抄表日期',type:'date'},
  {key:'projectName',label:'状态',type:'select',options:[
      {label:'已生效',value: 0},
      {label:'已作废',value: 1},
    ]},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}


/**-------------------列表-------------------**/
//总条数
const total = ref(0)
//表格列
const tableColumns = [
  {label:'期数',key:'issueNo'},
  {label:'抄表日期',key:'sendTime'},
  {label:'电流类型',key:'eleType',custom:true},
  {label:'电流值',key:'eleValue'},
  {label:'电表度数',key:'meterDegree'},
  {label:'用电量',key:'useDegree'},
  {label:'PUE值',key:'pueValue'},
  {label:'电流照片',key:'eleFiles',custom:true},
  {label:'电表照片',key:'meterFiles',custom:true},
  {label:'状态',key:'status',custom:true},
  {label:'作废原因',key:'cancelCase',custom:true},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格行数据
const tableData = ref([])
const getTableData = ()=>{
  tableData.value = sendRecordListByMeterId(meterInfo.id)
}
getTableData()


/**-------------------操作-------------------**/
//作废
const delHandler = async row =>{
  try{
    const result = await ElMessageBox.prompt('该操作将回退电表当前度数，请确认并填写作废原因', '抄表作废',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        lockScroll:true,
        closeOnClickModal:false,
        closeOnPressEscape:false,
        inputPlaceholder: '请填写作废原因',
        inputValidator: (value)=>{
          if(!value) return '请输入作废原因'
          else return true
        },
        type: 'warning',
      }
    )
    //todo 删除接口
    if(result.action === 'confirm' && result.value) {
      row.status = 1
      row.cancelCase = result.value
      delSendRecord(row)
    }
    message('作废成功',{type:'success'})
    getTableData()
  }catch(err){

  }
}
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <div class="page_container">
    <div class="left_container">
      <div class="container_title">
        抄表记录——{{meterInfo.meterNo}}
      </div>
      <div class="container_content">
        <!--        顶部筛选-->
        <SearchHeader :query-list="queryList" @search="searchHandler" />
        <!--    表格-->
        <PageTable :columns="tableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="tableData" :total="total" @pagination="paginationHandler">
          <template #eleType="{row}">
            <span v-if="row.eleType===0">直流</span>
            <span v-if="row.eleType===1">交流</span>
          </template>
          <template #eleFiles="{row}">
            <el-button size="small" text type="primary" @click="notDone">点击查看</el-button>
          </template>
          <template #meterFiles="{row}">
            <el-button size="small" text type="primary" @click="notDone">点击查看</el-button>
          </template>
          <template #status="{row}">
            <el-tag v-if="row.status === 0" type="primary">已生效</el-tag>
            <el-tag v-if="row.status === 1" type="danger">已作废</el-tag>
          </template>
          <template #cancelCase="{row}">
            <span v-if="row.status === 0">—— ——</span>
            <span v-else>{{row.cancelCase}}</span>
          </template>
          <template #operation="{row,index}">
            <el-button v-if="row.canCancel" :color="ButtonColor.DEL" :icon="CircleCloseFilled" plain round size="small" @click="delHandler(row)">作废</el-button>
          </template>
        </PageTable>
      </div>
    </div>
    <div class="right_container">
      <div class="button_item" @click="router.go(-1)">
        <el-button :icon="Back" round type="info">返回</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page_container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 1vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;

  .left_container {
    width: 86%;
    height: 100%;
    border-radius: 1.5vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .container_title {
      width: 100%;
      height: 6%;
      display: flex;
      align-items: center;
      padding: 0 2vh;
      font-size: 2vh;
      font-weight: 700;
      color: #666;
      border-bottom: 1px solid #eee;
    }

    .container_content {
      width: 100%;
      height: 94%;
      padding: 0.8vh 1.5vh;
      display: flex;
      flex-direction: column;
    }
  }
  .right_container {
    width: 14%;
    height: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;

    .button_item {
      width: 80%;
      margin: 20px 0;

      :deep(.el-button) {
        width: 100%;
        height: 40px;
        font-size: 1.5vh;
      }
    }
  }
}
</style>
